<template>
  <div class="app-container">
    <div style="padding: 5px 0px">
      <toolbar
        :table="$refs.table"
        @add="handleEdit"
        @delete="handleDelete"
        @refresh="handleRefresh"
      >
      </toolbar>
    </div>
    <div style="padding-top: 20px">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in list" :key="index"
          ><div>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>{{ item.name }}</span>
                 <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="() => handleDelete({ids:[item.id]})"
                  >删除</el-button
                >
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="() => handleEdit(item.id)"
                  >编辑</el-button
                >
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="() => handleEdit(item.id)"
                  >详情</el-button
                >
              </div>
              <div class="text item">
                <el-row :gutter="20" class="tag" style="white-space: nowrap">
                  <el-tag class="tag-item">{{ item.currencyName }}</el-tag>

                  <el-tag
                    class="tag-item"
                    type="warning"
                    show-overflow
                    v-if="!!item.bankTypeId"
                    :show-overflow-tooltip="true"
                    >{{ item.bankTypeName }}</el-tag
                  >
                </el-row>
                <el-row class="card-item" style="padding-top:30px">
                  <div style="float: left">银行对账单余额</div>
                  <div style="float: right">
                    {{ 0.0 }}
                  </div>
                </el-row>
              </div>
            </el-card>
          </div></el-col
        >
      </el-row>
    </div>
    <el-drawer direction="rtl" :visible.sync="editDrawer" :with-header="false">
      <div v-if="editDrawer">
        <edit :id.sync="currentId" @refresh="hanldeEditRefresh"></edit>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import toolbar from "@/components/Bar/toolbar.vue";
import edit from "./edit.vue";
import { getBankAccounts, deleteBankAccount } from "@/api/bank";
export default {
  components: {
    toolbar,
    edit,
  },
  data() {
    return {
      list: [],
      filter: {
        keyword: "",
        activated: null,
      },
      editDrawer: false,
      currentBankAccount: {},
      currentId: "",
      total: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getBankAccounts(this.filter).then((res) => {
        res = res || [];
        this.list = res;
        this.total = res.length;
      });
    },
    handleEdit(id) {
      this.editDrawer = true;
      this.currentId = id;
    },
    handleDelete({ ids }) {
      if (!ids || ids.length == 0) return;
      for (let i = 0; i < ids.length; i++) {
        deleteBankAccount(ids[i]).then((res) => {
          if (!res) return;
          if (i == ids.length - 1) {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              position: "bottom-right",
            });
            this.getData();
          }
        });
      }
    },
    handleRefresh() {
      this.keyword = 1;
      this.getData();
    },
    hanldeEditRefresh() {
      this.editDrawer = false;
      this.getData();
    },
    hanldeDbClick(row) {
      this.currentId = row.id;
      this.editDrawer = true;
    },
  },
  computed: {},
};
</script>
